﻿<!DOCTYPE html>
<html>
<HEAD>
	<TITLE>合同申请一览表</TITLE>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<META http-equiv=Content-Language content=zh-cn>
	<META http-equiv=Content-Type content="text/html; charset=gb2312">
	<META content="MSHTML 6.00.2900.5626" name=GENERATOR>
	<META content=FrontPage.Editor.Document name=ProgId>
	<LINK href="../js/style.css" rel=stylesheet>
	<style>
		.t1 {
			background-color: #99ccff; /* 淡蓝色 */
		}
	</style>
</HEAD>
<BODY>
<CENTER>
	<DIV id=app>
		<!-- 标题和搜索功能 -->
		<TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
			<TBODY>
			<TR bgColor=#ffffff>
				<TD align=middle width="100%" bgColor=#ffffff colSpan=20 height=22>
					<B>
						<H2>
							<FONT color=#0070c0>报价揭示列表</FONT>
							<IMG alt=帮助 src="../img/help_a.gif" border=0>
						</H2>
					</B>
				</TD>
			</TR>
			<TR>
				<TD align=middle width="100%" bgColor=#ffffff colSpan=9 height=22>
					询价书名称：<input type="text" v-model="searchKeyword" placeholder="请输入询价书名称">
					<input type="Button" value="查询" @click="performSearch">
				</TD>
			</TR>
			</TBODY>
		</TABLE>

		<!-- 列表表单 -->
		<FORM name=form action=Apply_list_do.asp method=post>
			<INPUT type=hidden name=p_type>
			<INPUT type=hidden value=3 name=p_lx>
			<TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
				<TBODY>
				<TR>
					<TD>
						<TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
							<TBODY>
							<TR class="t1"> <!-- 修改此处 -->
								<TD noWrap align=middle>
									选择
								</TD>
								<TD noWrap align=middle>
									序号
								</TD>
								<TD noWrap align=middle>
									对应询价书
								</TD>
								<TD noWrap align=middle>
									揭示时间
								</TD>
								<TD noWrap align=middle>
									最高报价
								</TD>
								<TD noWrap align=middle>
									最低报价
								</TD>
							</TR>
							<!-- 数据部分 -->
							<TR class="t2" v-for="(item, index) in paginatedData" :key="item.id" :style="{ backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#ffffff' }">
								<TD align=middle>
									<INPUT type=radio :value="item.ID" v-model="selectedId" name=p_Applyno>
								</TD>
								<TD align=middle>
									{{ item.ID }}
								</TD>
								<TD>
									<A href="javascript:void(0);" @click="goToDetail(item.ENQUIRE_NUM);cunID(item.ID);">{{ item.ENQUIRE_NUM }}</A>
								</TD>
								<TD>
									{{ formatDate(new Date(item.END_DATE)) }}
								</TD>
								<TD>
									{{ item.TOP_QUOTE }}
								</TD>
								<TD>
									{{ item.LOW_QUOTE }}
								</TD>
							</TR>
							<TR>
								<TD align=middle width="100%" bgColor=#ffffff colSpan=9 height=22>
									<font color="#000064">◆&nbsp;</font>
									<button @click="goToFirstPage" :disabled="currentPage === 1">首页</button>
									<button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
									<button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
									<button @click="goToLastPage" :disabled="currentPage === totalPages">尾页</button>
									<FONT color=#000064>&nbsp;共{{ totalItems }}条记录，{{ totalPages }}页</FONT>
									<FONT color=#000064>&nbsp;当前页:<FONT color=blue>{{ currentPage }}</FONT>/{{ totalPages }}页</FONT>
									<FONT color=#000064>&nbsp;◆&nbsp;</FONT>
								</TD>
							</TR>
							</TBODY>
						</TABLE>
					</TD>
				</TR>
				</TBODY>
			</TABLE>
			<P align=center>
				<!--<input type="button" value="打开" @click="openDetail">-->
				<input type="button" value="合同编制" @click="editContract">
				<INPUT onclick="javascript:history.back()" type=button value=返回 name=FLOWLEADShow>
			</P>
		</FORM>
	</DIV>
</CENTER>
<SCRIPT>
	new Vue({
		el: '#app',
		data() {
			return {
				contractList: [],           // 所有合同数据
				filteredData: [],           // 搜索筛选后的数据
				currentPage: 1,             // 当前页
				pageSize: 10,               // 每页显示的条数
				searchKeyword: '',          // 搜索关键词
				selectedId: null            // 选中的合同 ID
			};
		},
		computed: {
			totalItems() {                 // 总记录数
				return this.filteredData.length;
			},
			totalPages() {                 // 总页数
				return Math.ceil(this.totalItems / this.pageSize);
			},
			paginatedData() {              // 分页后的数据
				const start = (this.currentPage - 1) * this.pageSize;
				const end = start + this.pageSize;
				return this.filteredData.slice(start, end);
			}
		},
		created() {
			this.selectAllContract();       // 初始化加载数据
			this.filteredData = this.contractList; // 初始化筛选数据为全部数据
		},
		methods: {
			selectAllContract() {          // 加载所有合同
				axios.get(`/put/selectAllAppEnquire`)
						.then(response => {
							this.contractList = response.data.data;
							this.filteredData = this.contractList; // 初始数据为全部数据
						});
			},
			performSearch() {              // 执行搜索
				// 根据搜索关键词筛选对应询价书
				this.filteredData = this.contractList.filter(item => {
					return item.ENQUIRE_NUM.toLowerCase().includes(this.searchKeyword.toLowerCase());
				});
				this.currentPage = 1;      // 搜索后返回到第一页
			},
			cunID(id){
				console.log(`合同ID：${id}`);
				sessionStorage.setItem('cont_id', id);
			},
			goToDetail(ENQUIRE_NUM) {               // 打开详细
				console.log(`打开合同申请明细：${ENQUIRE_NUM}`);
				sessionStorage.setItem('ENQUIRE_NUM', ENQUIRE_NUM);
				window.location.href = "Apply_xjsmx.html";
			},
			editContract() {               // 合同编制
				console.log('合同编制按钮点击');
				console.log('选择的ID为:',this.selectedId);
			},
			goToFirstPage() {              // 首页
				this.currentPage = 1;
			},
			goToPreviousPage() {           // 上一页
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			goToNextPage() {               // 下一页
				if (this.currentPage < this.totalPages) {
					this.currentPage++;
				}
			},
			goToLastPage() {               // 尾页
				this.currentPage = this.totalPages;
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		}
	});
</SCRIPT>
</BODY>
</HTML>